<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<title>仿探探</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			html,
			body {
				height: 100%;
				overflow: hidden;
			}

			#canvas {
				background-color: #D7EBE0;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>

		<script type="text/javascript">
			class RoundRect {
				constructor(props) {
					this.x = 0;
					this.y = 0;
					this.w = 100;
					this.h = 100;
					this.r = 10;
					this.scaleX = 1;
					this.scaleY = 1;
					this.globalAlpha = 1;
					this.fillStyle = 'rgba(255,255,255,0)'
					this.strokeStyle = 'rgba(0,0,0,1)'
					this.shadowColor = 'rgba(0,0,0,0)';
					this.shadowBlur = 10;
					this.shadowOffsetY = 0;
					this.shadowOffsetX = 0;
					Object.assign(this, props)
					return this;
				}
				render(ctx) {
					var {
						x,
						y,
						w,
						h,
						strokeStyle,
						fillStyle,
						shadowColor,
						shadowBlur,
						shadowOffsetX,
						shadowOffsetY,
						scaleX,
						scaleY,
						globalAlpha
					} = this
					ctx.save()
					ctx.translate(x - w / 2, y - h / 2)
					ctx.fillStyle = fillStyle
					ctx.strokeStyle = strokeStyle
					ctx.shadowColor = shadowColor;
					ctx.shadowBlur = shadowBlur;
					ctx.shadowOffsetX = shadowOffsetX;
					ctx.shadowOffsetY = shadowOffsetY;
					ctx.scale(scaleX, scaleY);
					ctx.globalAlpha = globalAlpha
					this.drawRoundRectPath(ctx)
					ctx.stroke()
					ctx.fill()
					ctx.restore()
					return this
				}
				drawRoundRectPath(ctx, w, h, r) {
					var {
						w,
						h,
						r
					} = this;
					ctx.beginPath()
					// 从右下角半圆弧开始绘制
					ctx.arc(w - r, h - r, r, 0, Math.PI / 2, false);
					ctx.lineTo(r, h)
					ctx.arc(r, h - r, r, Math.PI / 2, Math.PI, false);
					ctx.lineTo(0, r)
					ctx.arc(r, r, r, Math.PI, Math.PI * 1.5, false);
					ctx.lineTo(w - r, 0)
					ctx.arc(w - r, r, r, Math.PI * 1.5, 2 * Math.PI, false);
					ctx.lineTo(w, h - r)
					ctx.closePath()
				}
			}
		</script>
		<script type="text/javascript">
			var canvas = document.getElementById('canvas')
			var ctx = canvas.getContext('2d')
			var W = canvas.width = window.innerWidth
			var H = canvas.height = window.innerHeight

			var cards = [];
			// 卡片宽度，高度
			var cw = 300,ch = 450,scale =0.1;
			createCard();
			(function move(){
				window.requestAnimationFrame(move);
				ctx.clearRect(0,0,W,H)
				var i = cards.length;
				while(i--){
					cardMove(cards[i],i)
				}
			})()
			function cardMove(card,index){
				card.scaleX = 1-index*scale // 缩放
				card.scaleX = 1-index*scale // 缩放
				card.y = H / 2 + index*10 // 垂直偏移
				card.x = W / 2 + index*(cw*scale/2) // 水平居中
				card.globalAlpha = 1-index*0.3 // 透明度
				card.render(ctx)
			}
			function createCard() {
				for (var i = 0; i < 4; i++) {
					cards.push(new RoundRect({
						x: W / 2,
						y: H / 2,
						w: cw,
						h: ch,
						scaleX: 1,
						scaleY: 1,
						strokeStyle: 'rgba(0,0,0,0)',
						fillStyle: '#ffffff'
					}))
				}
			}
		</script>
	</body>
</html>
